<template>
  <div style="border-radius:5px;">
    <div style="background-color:#FFFFFF;box-shadow: 2px 2px 5px #888888;overflow: hidden;border-radius:5px;">
      <div style="padding:5px;" />
      <br>

      <el-form ref="userFormQueryFields" :inline="true" label-width="70px" label-position="right" style="margin-left: 5%">

        <template v-for="(item,index) in userFormQueryFields">
          <el-form-item
            v-if="item.search"
            :key="index"
            :label="item.label"
            :prop="item.prop"
          >
            <el-input v-if="item.search===true && item.searchType==='string'" v-model="item.value" />
            <el-select v-else-if="item.search===true && item.searchType==='radio'" v-model="item.value">
              <el-option
                v-for="dict in dicts[item.prop]"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            <el-select
              v-else-if="item.search===true && item.searchType==='checkbox'"
              v-model="item.value"
              multiple
              filterable
            >
              <el-option
                v-for="dict in dicts[item.prop]"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            <el-date-picker
              v-if="item.search===true && item.searchType==='date'"
              v-model="item.value"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </template>
        <el-form-item style="float:right">
          <el-button type="primary" @click="resetForm('form')">清空</el-button>
          <el-button type="primary" @click="submitForm()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      // 提交的表单

    }
  },

  methods: {
    ...mapActions({
      saveFormVal: 'changeUserFormAction',
      search: 'changeUserQueryFlagAction',
      userQueryfields: 'changeUserQueryFieldsAction',
      searchfields: 'changeUserFieldsQueryFlagAction',
      getUserFormQueryFields: 'getUserFormQueryFields'
    }),

    // 重置表单
    resetForm(formName) {
      console.log('==================')
      const form = this.userFormQueryFields
      for (const index in form) {
        form[index].value = ''
      }
    },

    // 提交表单
    submitForm: function() {
      this.searchfields(true)
    }
  },

  computed: {
    userFormQueryFields() {
      return this.$store.state.userInfo.userFormQueryFields
    },
    dicts() {
      return this.$store.state.userInfo.dicts
    }

  },

  mounted() {
    this.saveFormVal(this.form)
  }
}
</script>

<style>

</style>
